<template>
    <el-drawer
    v-model="dialog"
    :title="title"
    :size="size"
    :close-on-click-modal="false"
    direction="rtl"
    class="demo-drawer"
  >
    <div class="demo-drawer_content">
      <slot></slot>   
    </div>
    <div class="demo-drawer_footer">
        <el-button @click="cancelSubmit">取消</el-button>
        <el-button type="primary" :loading="loading" @click="submit">
          {{ loading ? '提交中 ...' : '提交' }}
        </el-button>
    </div>
  </el-drawer>
</template>

<script setup>
import {ref} from 'vue'

let dialog = ref(false)
let loading = ref(false)

//打开
const open = () => dialog.value = true

//关闭
const close = () => dialog.value = false

//发起请求loading状态
const showLoading = () => loading.value = true

//完成相应loadng状态
const hideLoading = () => loading.value = false

//提交按钮事件
let emit = defineEmits(['submit','cancel-submit']) //通知父组件
const submit = ()=> emit('submit')
const cancelSubmit = ()=>{
    close()
    emit('cancel-submit')
    hideLoading()
}

//向外提供方法或数据
defineExpose({
  open,
  close,
  showLoading,
  hideLoading
})

//接受外部提供的数据
defineProps({
  title:String,
  size:String,
  updateSubmit:Function,
})
</script>

<style lang="less" scoped>
.demo-drawer{
  height: 100%;
  
  .demo-drawer_content{
    // background-color: aqua;
    height: 90%;
    display: flex;
    flex-direction:column;  
    overflow: auto;  
  }
  .demo-drawer_footer{
    // background-color: brown;
    height: 10%;
  }
  
}
</style>